<template>
	<view>
		<view class="order-content">
			<view style="margin-bottom: 40rpx;">
				<view class="detail-title">
					<text>公区检查表</text>
				</view>
			</view>
			<view v-if="checkList.length" class="check-content" style="margin-bottom: 20rpx;">
				<!-- <view class="check-title">巡逻检查项{{'(' + checkList.length + ')'}}</view> -->
				<view class="check-item" v-for="(item, index) in checkList" :key="item.id">
					<view :class="{'rightColor': item.isPass == 1, 'wrongColor': item.isPass === 2}">
						{{index+1}}、{{item.item}}
					</view>
					<view class="check-result">
						<uni-data-checkbox :selectedColor="item.isPass == 1 ? '#33cc33' : 'red'" v-model="item.isPass"
							:localdata="status"></uni-data-checkbox>
					</view>
					<unquality-check @input="handleInput(item, $event)" @upload="handleUpload(item, $event)"
						v-show="item.isPass == 2"></unquality-check>
				</view>
			</view>
			<view style="margin-bottom: 40rpx;">
				<view class="detail-title">
					<text>公区成品保护表</text>
				</view>
			</view>
			<view v-if="protectList.length" class="check-content" style="margin-bottom: 20rpx;">
				<!-- <view class="check-title">巡逻检查项{{'(' + protectList.length + ')'}}</view> -->
				<view class="check-item" v-for="(item, index) in protectList" :key="item.id">
					<view :class="{'rightColor': item.isPass == 1, 'wrongColor': item.isPass === 2}">
						{{index+1}}、{{item.item}}
					</view>
					<view class="check-result">
						<uni-data-checkbox :selectedColor="item.isPass == 1 ? '#33cc33' : 'red'" v-model="item.isPass"
							:localdata="status"></uni-data-checkbox>
					</view>
					<unquality-check @input="handleInput(item, $event)" @upload="handleUpload(item, $event)"
						v-show="item.isPass == 2"></unquality-check>
				</view>
			</view>
			<view style="margin-bottom: 40rpx;">
				<view class="detail-title">
					<text>确认信息</text>
				</view>
				<view class="confirm-item">
					<view class="confirm-label">其他说明:</view>
					<textarea v-model="params2.fitstartCheckRemark" class="confirm-desc" value="" placeholder="请输入内容" />
				</view>
				<view class="confirm-item">
					<view class="confirm-label">业主/装修公司

						确认：:</view>
					<view class="sign-item" @click="goSignPage">
						<image :src="resultUrl" mode=""></image>
					</view>
				</view>
				<view style="margin-bottom: 20rpx;">备注：</view>
				<view>
					此表做为房屋装修时对公共区域进行确认，如在装修前发现问题，物管中心将配合处理。如在装修过程中至装修完工备案前公区出现问题，均由装修公司或业主自行承担。</view>
			</view>
		</view>

		<button class="evaluate-btn" @click="handleSubmit">提交</button>
	</view>
</template>

<script>
	import UnqualityCheck from '../components/unqualityCheck.vue'
	export default {
		components: {
			UnqualityCheck
		},
		data() {
			return {
				params1: [],
				resultUrl: '../../static/icon/8.png',
				status: [{
						text: '合格',
						value: 1
					},
					{
						text: '不合格',
						value: 2
					}
				],
				checkList: [],
				protectList: [],
				params: {
					applyId: null,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params2: {
					id: null,
					stage: 'fitstart_check',
					isNext:true,
					fitstartCheckRemark: null,
					fitstartCheckConfirmAcc: null
				}
			}
		},
		onLoad(options) {
			this.params.applyId = +options.id
			this.params2.id = +options.id
			this.getDetail()
		},
		onShow() {
			if (uni.getStorageSync('ceshiUrl')) {
				this.resultUrl = uni.getStorageSync('ceshiUrl');
				uni.removeStorageSync('ceshiUrl');
			}
		},
		watch: {
			resultUrl: {
				handler: async function(val, oldVal) {
					let base64 = await this.urlTobase64(val)
					let fileId = await this.uploadFile(base64)
					this.params2.fitstartCheckConfirmAcc = fileId
				}
			}
		},
		methods: {
			handleInput(item, event) {
				console.log(item, event)
				item.remark = event
				console.log('list', this.checkList)
			},
			handleUpload(item, event) {
				console.log(item, event)
				item.accessory = event.join(',')
			},
			handleSubmit() {
				// console.log(this.params1)
				this.params1 = [...this.checkList, ...this.protectList]
				let flag = this.params1.every(item => item.isPass)
				
				if(!flag) {
					uni.showToast({
						title: '还有未填写的检查项',
						icon: 'none'
					})
					return
				}
				this.onCheckSubmit()
				// console.log('params', this.params)
			},
			goSignPage() {
				uni.navigateTo({
					url: '/ticketSystem/sign/sign'
				})
			},
			getDetail() {
				uni.showLoading()
				this.$http.post('/fitment/checkitem/list', this.params).then(res => {
					if (res.code === 10000) {
						res.data.list = res.data.list || []
						res.data.list.forEach(item => {
							item.isPass = null
						})
						this.checkItemList = res.data.list
						this.checkList = res.data.list.filter(item => item.type === 1)
						this.protectList = res.data.list.filter(item => item.type === 2)
					}
				})
			},
			async onCheckSubmit() {
				const msg = await this.updateCheckList()
				const msg1 = await this.updateInfo()
				if(msg && msg1) {
					uni.redirectTo({
						url: '/ticketSystem/acceptSuccess/acceptSuccess?path=/pages/service/service' + '&title=返回物料首页'
					})
				}else {
					uni.showToast({
						title: '提交失败,请稍后再试',
						icon: 'none'
					})
				}
			},
			updateCheckList() {
				return new Promise((resolve, reject) => {
					uni.showLoading()
					this.$http.post('/fitment/checkitem/batchUpdate', {list: this.params1}).then(res => {
						if (res.code === 10000) {
							resolve(res.msg)
						}
					})
				})
			},
			updateInfo() {
				return new Promise((resolve, reject) => {
					this.$http.post('/fitment/apply/update', this.params2).then(res => {
						if (res.code === 10000) {
							resolve(res.msg)
						}
					})
				})
			},
			urlTobase64(url) {
				console.log('转base64')
				return new Promise((resolve, reject) => {
					uni.getFileSystemManager().readFile({
						filePath: url, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => { //成功的回调
							let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
							// this.dataList.picList.push(base64);
							// console.log(base64)
							console.log('转base64成功')
							let file = {
								fileData: base64,
								fileName: url
							};
							resolve(file)
							// this.uploadFile(file)
						},
						fail: err => {
							reject(err)
						}
					})
				})
			},
			// 上传文件
			uploadFile(file) {
				return new Promise((resolve, reject) => {
					// console.log(file)
					this.$http.post('common/file/upload', file).then(res => {
						console.log(res)
						if (res.code === 10000) {
							// this.baseArr.push(res.data.id)
							resolve(res.data.id)
						}
					})
				})

			}
		}
	}
</script>

<style lang="scss">
	@import '../../style/info.scss';

	.sign-item {
		// margin-left: 20rpx;
		width: 220rpx;
		height: 220rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.evaluate-btn {
		height: 90rpx;
		color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #1152FC;
		border-radius: 0;
	}

	.confirm-item {
		display: flex;
		padding-right: 20rpx;
		margin-bottom: 60rpx;

		.confirm-label {
			width: 200rpx;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
		}

		// justify-content: space-between;
	}

	.confirm-desc {
		width: 452rpx;
		padding: 20rpx;
		border: 2rpx solid #ccc;

	}

	.rightColor {
		color: #33cc33;
		// color: #49B980;
	}

	.wrongColor {
		color: red;
	}

	.check-content {
		height: auto;
		width: 680rpx;
		// border: 2rpx solid #ccc;
		// background-color: pink;
		// padding: 20rpx;

		.install-type {
			font-size: 36rpx;
		}

		.check-title {
			height: 80rpx;
			font-size: 40rpx;
			text-align: center;
			line-height: 60rpx;
			border-bottom: 2rpx solid #DEDEDE;
			margin-bottom: 30rpx;
		}

		.check-item {
			margin-bottom: 40rpx;
			font-size: 32rpx;

		}

		.check-result {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-bottom: 20rpx;

			.switch {
				color: #3080FB;
			}
		}
	}
</style>
